<template>
  <div class="v-waterfall-content" id="v-waterfall">
   
    <div
      v-for="(img, index) in waterfallList"
      :key="index"
      class="v-waterfall-item"
      :style="{
        top: img.top + 'px',
        left: img.left + 'px',
        width: ImgWidth + 'px',
        height: img.height,
      }"
    >
      <img :src="img.src" alt="" />
     
    </div>

    
  </div>
</template>

<script>
export default {
  name: "pic-waterfall",
  data() {
    return {
      imgArr: [],
      ImgWidth: 300, //图片宽度
      ImgRight: 10,
      ImgBottom: 10,
      calcHeight: [],
      data: { page: 1, page_size: 20 },
      waterfallList: [], //计算后的图片数组
      timer: false,
      isshow:0
    };
  },
  mounted() {
    const that = this;
    this.calculationWidth();

    //挂载window的resize事件
    window.onresize = () => {
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.timer = true;
        setTimeout(function () {
          that.waterfallList = [];
          that.calculationWidth();
          that.timer = false;
        }, 500);
      }
    };
  },
  methods: {
    addImage() {},

    //根据图片的宽度和容器的宽度计算有几列,并对每一列的高度进行初始化为0
    calculationWidth() {
      let rectInfo = document
        .getElementById("v-waterfall")
        .getBoundingClientRect();

      let colnum = Math.floor(rectInfo.width / this.ImgWidth);

      for (let i = 0; i < colnum; i++) {
        this.calcHeight[i] = 0;
      }

      this.imgPreloading();
    },

    //图片预加载
    async imgPreloading() {
      let ress = await this.$api.addtoken();
      this.token = ress.data.token;
      let data  = []
      await this.$http
        .post(
          `http://media.api.appletcloud.net/api/ice/getTemplates?token=${this.token}` + '&page_size=100',
          {
            emulateJSON: true,
          }
        )
        .then((res) => {
           data = res.data.data.list;
        });
       
        // return false
        let newImageList = data
          for (let i = 0; i < newImageList.length; i++) {
            let imgInfo = await((index) => {
              return new Promise((resolve) => {
                let aImg = new Image();
                aImg.src = newImageList[index].cover_img;
                aImg.onload = () => {
                  let imgData = {};
                  imgData.src = newImageList[index].cover_img;
                  imgData.width = this.ImgWidth; //设置图片宽度
                  imgData.height = (this.ImgWidth / aImg.width) * aImg.height; //按比例设置图片高度
                  this.rankImg(imgData); //渲染页面
                  resolve(imgData);
                };
              });
            })(i);
           
           this.waterfallList.push(imgInfo);
          }
    },

    //瀑布流布局
    rankImg(imgData) {
      let { ImgWidth, ImgRight, ImgBottom, calcHeight } = this;
      let minIndex = this.filterMin(); //获得高度最小的一列的下标
      imgData.top = calcHeight[minIndex]; //插入图片的top值
      imgData.left = minIndex * (ImgRight + ImgWidth); //插入图片的left值
      calcHeight[minIndex] += imgData.height + ImgBottom; //更新当前列的高度
    },

    //找到最短的列并返回下标
    filterMin() {
      const min = Math.min.apply(null, this.calcHeight);
      return this.calcHeight.indexOf(min);
    },
    tupianFn(){

    }
  },
};
</script>

<style lang="less" scoped>
.v-waterfall-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
}

.v-waterfall-item {
  position: absolute;
}

.v-waterfall-item img {
  width: 100%;
  height: 100%;
}

.addImage {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
}
</style>
